<template>
  <div class="facility-maintenance">
    <div class="header">
      <router-link to="/main/wuye/facility/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>维护保养</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待保养" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="location" label="设备位置" width="180"></el-table-column>
            <el-table-column prop="maintenanceType" label="保养类型" width="120"></el-table-column>
            <el-table-column prop="lastMaintenance" label="上次保养" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="startMaintenance(scope.row)">保养</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已保养" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="maintenanceStaff" label="保养人员" width="120"></el-table-column>
            <el-table-column prop="maintenanceTime" label="保养时间" width="180"></el-table-column>
            <el-table-column prop="nextMaintenance" label="下次保养" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="设备保养详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="device-detail" v-if="currentDevice">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="设备编号">{{ currentDevice.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ currentDevice.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{ currentDevice.location }}</el-descriptions-item>
          <el-descriptions-item label="设备类型">{{ currentDevice.deviceType }}</el-descriptions-item>
          <el-descriptions-item label="保养周期">{{ currentDevice.maintenanceCycle }}</el-descriptions-item>
          <el-descriptions-item label="保养类型">{{ currentDevice.maintenanceType }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section" v-if="currentDevice.maintenanceHistory">
          <h4>保养记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentDevice.maintenanceHistory"
              :key="index"
              :timestamp="record.time">
              {{ record.staff }} 进行了{{ record.type }}保养
              <p class="maintenance-content">内容：{{ record.content }}</p>
              <p v-if="record.remark" class="maintenance-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 保养表单对话框 -->
    <el-dialog title="设备保养" :visible.sync="maintenanceDialogVisible" width="50%">
      <el-form :model="maintenanceForm" label-width="100px">
        <el-form-item label="保养项目">
          <el-checkbox-group v-model="maintenanceForm.items">
            <el-checkbox label="清洁除尘">清洁除尘</el-checkbox>
            <el-checkbox label="润滑保养">润滑保养</el-checkbox>
            <el-checkbox label="部件更换">部件更换</el-checkbox>
            <el-checkbox label="性能调试">性能调试</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="更换配件">
          <div v-for="(part, index) in maintenanceForm.parts" :key="index" class="part-item">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-input v-model="part.name" placeholder="配件名称"></el-input>
              </el-col>
              <el-col :span="6">
                <el-input-number v-model="part.quantity" :min="1" placeholder="数量"></el-input-number>
              </el-col>
              <el-col :span="6">
                <el-button type="text" @click.prevent="removePart(index)">删除</el-button>
              </el-col>
            </el-row>
          </div>
          <el-button style="margin-top: 10px;" @click="addPart">添加配件</el-button>
        </el-form-item>

        <el-form-item label="保养内容">
          <el-input type="textarea" v-model="maintenanceForm.content" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="下次保养">
          <el-date-picker
            v-model="maintenanceForm.nextMaintenance"
            type="date"
            placeholder="选择下次保养日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注说明">
          <el-input type="textarea" v-model="maintenanceForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="maintenanceDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMaintenance">提交保养</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          deviceNo: 'SB202403001',
          deviceName: '中央空调主机',
          location: 'A栋-设备间',
          deviceType: '空调设备',
          maintenanceType: '季度保养',
          maintenanceCycle: '每季度',
          lastMaintenance: '2023-12-15'
        }
      ],
      completedList: [],
      detailDialogVisible: false,
      maintenanceDialogVisible: false,
      currentDevice: null,
      maintenanceForm: {
        items: [],
        parts: [],
        content: '',
        nextMaintenance: '',
        remark: ''
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentDevice = row
      this.detailDialogVisible = true
    },
    startMaintenance(row) {
      this.currentDevice = row
      this.maintenanceForm = {
        items: [],
        parts: [],
        content: '',
        nextMaintenance: '',
        remark: ''
      }
      this.maintenanceDialogVisible = true
    },
    addPart() {
      this.maintenanceForm.parts.push({
        name: '',
        quantity: 1
      })
    },
    removePart(index) {
      this.maintenanceForm.parts.splice(index, 1)
    },
    submitMaintenance() {
      if (!this.maintenanceForm.items.length || !this.maintenanceForm.content || !this.maintenanceForm.nextMaintenance) {
        this.$message.error('请填写完整的保养信息')
        return
      }

      // TODO: 提交保养信息到后端
      const maintenanceRecord = {
        time: new Date().toLocaleString(),
        staff: '当前用户',
        type: this.currentDevice.maintenanceType,
        content: this.maintenanceForm.content,
        remark: this.maintenanceForm.remark
      }

      this.currentDevice.maintenanceHistory = this.currentDevice.maintenanceHistory || []
      this.currentDevice.maintenanceHistory.unshift(maintenanceRecord)

      // 从待保养列表移动到已保养列表
      const index = this.pendingList.findIndex(item => item.deviceNo === this.currentDevice.deviceNo)
      if (index > -1) {
        const device = { ...this.currentDevice }
        device.maintenanceStaff = maintenanceRecord.staff
        device.maintenanceTime = maintenanceRecord.time
        device.nextMaintenance = this.formatDate(this.maintenanceForm.nextMaintenance)
        this.pendingList.splice(index, 1)
        this.completedList.unshift(device)
      }

      this.$message.success('保养记录提交成功')
      this.maintenanceDialogVisible = false
    },
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.facility-maintenance {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .maintenance-content {
      margin: 5px 0 0;
      color: #606266;
    }

    .maintenance-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .part-item {
    margin-bottom: 10px;
  }
}
</style> 